use leptos::prelude::*;

/// Banner Component
/// Displays the header with logo and application title
#[component]
#[must_use]
pub fn UiBanner(#[prop(optional)] class: Option<String>) -> impl IntoView {
    let base = "flex items-center space-x-3";
    let class = class.map_or_else(|| base.to_string(), |c| format!("{base} {c}"));

    view! {
        <div class=class>
            <div class="bg-gradient-to-br from-blue-500 to-purple-600 border-2 border-white rounded-md w-10 h-10 flex items-center justify-center shadow-lg">
                <span class="text-white font-bold text-lg">"R²"</span>
            </div>
            <div>
                <h1 class="text-xl font-bold text-gray-800 dark:text-white">"R² Meta-Orchestrated"</h1>
                <p class="text-xs text-gray-600 dark:text-gray-300">"云端管理平台"</p>
            </div>
        </div>
    }
}
